<template>
  <div class="user-avator-dropdown" @mouseenter="showdrop=true" @mouseleave="showdrop=false">
      <div style="text-align:center; color:#fff;font-size:14px;">
        <Icon type="ios-contact" size="30" /> {{ userName }}
      </div>
      <div class="user-info-dropdown" v-show="showdrop">
        <div class="user-info-header">{{ phoneNumber }}</div>
        <div class="user-info-body">
          <p>
            <Poptip trigger="hover" content="所在部门" width="100"><i class="iconsys icondepartment" style="margin-right:0px;"></i> {{orgName}}
            </Poptip>
          </p>
          <p><Poptip trigger="hover" content="登录时间"><i class="iconsys icontime" style="margin-right:0px;"></i> {{loginTime}}
          </Poptip></p>
          <p><Poptip trigger="hover" content="所在位置"><i class="iconsys iconweizhi" style="margin-right:0px;"></i> {{loginAdress && loginAdress !== 'null' ? loginAdress : ''}}（IP{{loginIp}}）
          </Poptip></p>
          <p><Poptip trigger="hover" content="上次登录时间"><i class="iconsys iconbacktime" style="margin-right:0px;"></i> {{lastLoginTime}}
          </Poptip></p>
        </div>
        <div class="user-info-footer">
        <Button type="default" ghost style="color:#DCDEE2;border-color:#DCDEE2;margin-right:24px;" @click.native="showModifyPass">修改密码</Button>
        <Button type="primary" @click.native="handleClick('logout')">退出登录</Button>
        </div>
      </div>
  </div>
</template>

<script>
import './user.less'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'User',
  data () {
    return {
      showdrop: false
    }
  },
  computed: {
    ...mapState({
      'userName': state => state.user.userName,
      'phoneNumber': state => {
        let phone = state.user.phoneNumber
        return phone.substring(0, 3) + '*****' + phone.substring(8)
      },
      'loginTime': state => state.user.loginTime,
      'orgName': state => state.user.orgName,
      'lastLoginTime': state => state.user.lastLoginTime,
      'loginIp': state => state.user.loginIp,
      'loginAdress': state => state.user.loginAdress,
      'avatorImgPath': state => state.user.avatorImgPath
    })
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$store.commit('setTagNavList', [])
        location.reload()
      })
    },
    message () {
      this.$router.push({
        name: 'message_page'
      })
    },
    showModifyPass () {
      this.$emit('modifypass')
    },
    handleClick (name) {
      switch (name) {
        case 'logout': this.logout()
          break
        case 'message': this.message()
          break
      }
    }
  }
}
</script>
